<template>
  <div id="TypeCard">
    <div class="type-font">
      <i class="el-icon-star-on"></i>
      <span>{{data.className}}</span>
    </div>
    <div class="setting-icon">
      <el-dropdown trigger="click">
        <div class="setting-icon">
          <i class="el-icon-setting"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item class="el-icon-delete delete-font" @click.native="deleteClass">删除</el-dropdown-item>
          <el-dropdown-item class="el-icon-edit" @click.native="dialogFormVisible = true"><span>修改</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
<!--    -->
    <el-dialog title="修改类别名" :visible.sync="dialogFormVisible" :append-to-body="true">
      <el-row>
        <el-col :span="24">
          <el-form :model="form">
            <el-form-item>
              <el-input v-model="form.name" autocomplete="off" placeholder="请输入新的类别名" v-on:keydown.enter.native="updateClass"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "TypeCard",
  props: {
    data: null,
    parentId: null,
    getChildClass: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: null
      }
    }
  },
  methods: {
    deleteClass: function () {
      this.$api.good.deleteClass({
        classId: this.data.classId
      }).then(res => {
        console.log("deleteClass", res);
        if (res.data.code === 200) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.getChildClass(this.parentId);
        }
      })
    },
    updateClass: function () {
      this.$api.good.updateClass({
        parentClass: this.parentId,
        classId: this.data.classId,
        className: this.form.name
      }).then(res => {
        console.log("updateClass", res);
        if (res.data.code === 200) {
          this.$message({
            message: "修改子类别成功",
            type: "success"
          });
          this.getChildClass(this.parentId);
          this.dialogFormVisible = false;
        }
      })
    }
  }
}
</script>

<style scoped>
#TypeCard {
  background: #BCD2EE;
  width: 260px;
  height: 140px;
  border-radius: 20px;
  position: relative;
}
.type-font {
  padding-top: 10px;
  color: rgba(28, 28, 28, 0.6);
  font-size: 36px;
}
.setting-icon {
  position: absolute;
  cursor: pointer;
  bottom: 0;
  right: 5px;
  color: rgba(28, 28, 28, 0.6);
  font-size: 30px;
}
.setting-icon:hover {
  color: #3a8ee6;
}
.delete-font {
  color: #9B1A1A;
}
>>> .el-dialog {
  width: 400px;
  border-radius: 25px;
  background: #F0FFFF;
}
>>> .el-dialog__title {
  line-height: 30px;
  font-size: 30px;
  color: rgba(28, 28, 28, 0.6);
  font-weight: bold;
}
>>> .el-dialog__body {
  padding: 20px 40px 0 40px;
}
>>> .el-dialog__header {
  padding: 10px 40px;
  background: rgba(176, 224, 230, 0.8);
  border-radius: 25px 25px 0 0;
}
>>> .el-dialog__close {
  font-size: 30px;
  color: rgba(28, 28, 28, 0.6);
}
</style>
